<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机图片</title>
</head>
<body>
<!-- 小图 -->
<div style="background-color:black;border: dotted; height: 100px; width: 200px">
    <img src="img/1.jpg" id="small" style="width: 200px; height: 100px;">
</div>
<!-- 大图 -->
<div style="border: double ;width: 400px; height: 400px; position: absolute; left: 500px; top:10px">
    <img src="" id="big" style="width: 400px; height: 400px; display:none;">
</div>

<!-- 开始和结束按钮 -->
<input id="startBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="开始">
<input id="stopBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="停止">
</body>
<script src="../js/jquery-3.3.1.min.js"></script>

        <script>
            //1.首先一个数组
            let imgs=[
                "img/1.jpg",
                "img/2.jpg",
                "img/3.jpg",
                "img/4.jpg",
                "img/5.jpg",
                "img/6.jpg",
                "img/7.jpg",
                "img/8.jpg",
                "img/9.jpg"
            ];

            //2.定义一个计数器
            let count =0;
            //3.定时器
            let time =null;
            //4.图片路径
            let imgSrc="";

            //5.给开始绑定单击
            $("#startBtn").click(function(){
               //点击开始，所以开始这个按钮处于禁止状态
                $("#startBtn").prop("disabled",true);
                //停止处于开始状态
                $("#stopBtn").prop("disabled",false);

                //6.设置定时器
                //setInterval按照指定的周期（以毫秒计）来调用
                time =setInterval(function(){
                    //7.获取循环图片路径
                    let index=count%imgs.length;

                    //8.小图实现
                    imgSrc =imgs[index];
                    $("#small").prop("src",imgSrc);
                    count++;
                },1000);
            });


            //给大图绑定单击
            $("#stopBtn").click(function(){
                //首先取消定时
                clearInterval(time);

                //设置按钮
                $("#startBtn").prop("disabled",false);
                $("#stopBtn").prop("disabled",true);

                //图片放到大图
                $("#big").prop("src",imgSrc);
                //因为设置了display:none禁止，所以要设置显示
                $("#big").prop("style","width: 400px; height: 400px;")
            });
        </script>
</html>